<template>
  <div>
  <h1>  module 组件</h1>

  <hr>
  <h2>  获取 module/user 的值:      {{$store.state.user.token}} </h2>
  <h2>  获取 module/setting 的值:   {{$store.state.setting.name}}  </h2>

<hr>

<h2> mapGetters 辅助函数获取:{{token}} -----{{setting}} </h2>

<button @click='mSetToken'>点击设置token</button>


<button @click='asyncMSetToken'>  异步 点击设置token</button>

  </div>
</template>

<script>

import {mapGetters}  from 'vuex'

//模块化的映射辅助函数
import { createNamespacedHelpers } from 'vuex'
// const {mapMutations , mapActions } = createNamespacedHelpers('模块的名字')
const {mapMutations , mapActions } = createNamespacedHelpers('user')

export default {
  computed:{
    ...mapGetters(['token','setting'])
  },

//方式一 没有模块内映射的写法
  // methods:{
  //   mSetToken() {
  //   //  this.$store.commit('setToken') 
  //    // this.$store.commit (['模块的名字/模块的mutations方法'])
  //    this.$store.commit('user/setToken')
  //   },
  //   asyncMSetToken() {
  //     this.$store.dispatch('user/asyncSetToken')
  //   }
  // },
  // 方式二 采用模块化的映射写法 需要提前   引入 对应的映射
    methods:{
      ...mapMutations(['setToken']),
      ...mapActions(['asyncSetToken']),

    mSetToken() {
    //  this.$store.commit('setToken') 
     // this.$store.commit (['模块的名字/模块的mutations方法'])
    //  this.$store.commit('user/setToken')
       this.setToken()
    },
    asyncMSetToken() {
      // this.$store.dispatch('user/asyncSetToken')
      this.asyncSetToken()
    }
  }

}
</script>

<style>

</style>